<template>
  <div v-if="data.ishide"></div>
  <div v-else-if="etype =='select' || data.show_type == 'select'"  class="field inline" :class="{disabled: data.readonly}">
    <label :class="{must: data.is_must}" v-if="data.label">{{data.label}}</label>
    <select class="ui selection dropdown" :class="{search: data.filter}" :id="s_id" v-model="params.value">
      <option value="">{{data.placeholder|| "请选择"+data.label}}</option>
      <option :value="item.value" v-for="item in elements">{{item.label}} <div class="description" v-if="item.description">{{item.description}}</div></option>
    </select>
    <i class="refresh icon" style="cursor:pointer" @click="refresh" v-if="params.value"></i>
  </div>
  <div v-else class="inline fields" :class="{disabled: data.readonly}">
    <label :class="{must: data.is_must}">{{data.label}}</label>
    <div class="field" v-if="elements.length == 0">无数据</div>
    <div class="field" v-for="item in elements" v-else>
      <div class="ui radio checkbox">
        <input type="radio" :value="item.value" v-model="params.value" :name="data.name">
        <label>{{item.label}}</label>
      </div>
    </div>
    <i class="refresh icon" style="cursor:pointer" @click="refresh" v-if="params.value"></i>
  </div>
</template>

<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';



export default {
  data() {
    return {
      element:[],
      etype: "",
      s_id: "",
      params:{
        name: null,
        value: null,
        text: null,
      }
    }
  },
  methods: {
    refresh(){
      if(this.etype == "radio"){
        this.params.value = "";
        return;
      }
      this.setSelect(true);
    },
    setSelect(isclear){
      let _this = this;
      if(isclear){
        $("#"+this.s_id).dropdown("clear");
        return;
      }
      $("#"+this.s_id)
      .dropdown({
        allowAdditions: true,
        selectOnKeydown: false,
        forceSelection: false,
        // onChange(value, text, $selectedItem){
        //   _this.params.text = text;
        //   _this.params.value = value;
        // }
      });
    }
  },
  watch: {
    data:{
      immediate: true,
      handler(val) {
      }
    },
    "data.ishide": function(val, old){
      this.$nextTick(() => {
        this.setSelect();
      });
    },
    "params.value": function(val, old){
      let _this = this;
      if(!this.data || this.data.readonly || val == old){
        return;
      }
      this.params.text = ( this.elements.filter(({value}) => {
        return value == val;
      })[0] || {}).label;
      this.$emit("onchange", this.params)
    },
    elements(val, old){
      let notClear = false; /*是否清除选择， 默认清除*/

      val.forEach(( item )=>{
        if(notClear){
          return;
        }
        notClear = item.value == this.params.value
      });
      this.setSelect(!notClear);
    }
  },
  computed: {
    elements(){
      if(Array.isArray(this.data.element)){
        return  this.data.element.map(function(item){
          if( typeof(item) != "object" ){
            return {value:item, label: item}
          };
          return item;
        })
      }
      return [];
    }
  },
  props:{
    data:{
      type:Object,
      default(){
        return {}
      }
    },
    value:{},
    type:{},
  },
  created() {
    this.params.value = this.data.value || "";
    this.params.name = this.data.name;
    this.params.raw = this.data;
    this.etype = this.type || this.data.show_type;
    this.s_id = this.data.name+"_"+Math.ceil( Math.random()*10000 );
    this.$nextTick(() => {
      this.setSelect();
    });
  }
};
</script>

<style lang="less" scoped>
  .ui.dropdown {
    .text .description{
      display: none;
    }
    .menu>.item{
      .description{
        font-size: 0.8rem;
        float: none;
        display: inline-block;
        word-break:break-all;
        margin: 0;
      }
    }
  }
  </style>
